<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>background</title>
    <style>
      div {
        background-color: pink;
        width: 600px;
        height: 600px;
        /* 设置图片路径，可以是相对的路径也可以是绝对路径 */
        background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbj-yuantu.fotomore.com%2Fcreative%2Fvcg%2Fnew%2FVCG211359631262.jpg%3FExpires%3D1643621486%26OSSAccessKeyId%3DLTAI2pb9T0vkLPEC%26Signature%3D9U4Yy4ohZHnVaGzyutKSXosROY0%253D%26x-oss-process%3Dimage%252Fauto-orient%252C0%252Fsaveexif%252C1%252Fresize%252Cm_lfit%252Ch_1200%252Cw_1200%252Climit_1%252Fsharpen%252C100%252Fquality%252CQ_80%252Fwatermark%252Cg_se%252Cx_0%252Cy_0%252Cimage_d2F0ZXIvdmNnLXdhdGVyLTIwMDAucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLG1fbGZpdCxoXzE3MSx3XzE3MSxsaW1pdF8x%252F&refer=http%3A%2F%2Fbj-yuantu.fotomore.com&app=2002&size=f10000,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645846671&t=4208f123f49b2bbf5fa710fa0f88597a);
        background-repeat: no-repeat;
        background-position: center center;
        /* 背景图位置的设置，可以设置3种方式来写。
        1.具体px 2.百分比 3.方向词 */
        background-size: contain;
        /* auto 保持图片的原本模样
           cover 不管图片能不能完整，会根据盒子去拉伸图片
           contain 保证图片的显示，尽可能的去拉伸图片*/
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
